<template>
	<view>
		<albumHeaderDetailVue :albumData="albumData || {}" />
		<view v-if="!!musicList.length">
			<view class="listItem" v-for="(item,index) in musicList" :key="item._id">
				<musicItemVue :musicData="item" />
			</view>
		</view>
		<view v-else style="height: 200px; display: flex; justify-content: center; align-items: center;">没有找到数据。。。。
		</view>
	</view>
</template>

<script>
	import albumHeaderDetailVue from './albumHeaderDetail.vue'
	import musicItemVue from './musicItem.vue'
	export default {
		components: {
			albumHeaderDetailVue,
			musicItemVue
		},
		mounted() {
			this.getMusicList()
			this.getAlbumData()
		},
		data() {
			return {
				musicList: [],
				albumData: {},
			}
		},
		methods: {
			getMusicList() {
				uniCloud.callFunction({
					name: 'musicList',
					data: {
						artistId: this.$route.query.id
					}
				}).then((res) => {
					console.log(res);
					this.musicList = res.result.data || []
				}).catch((err) => {
					console.error(err)
				})
			},
			getAlbumData() {
				uniCloud.callFunction({
					name: 'albumData',
					data: {
						data:{ _id: this.$route.query.id}
					}
				}).then((res) => {
					this.albumData = res.result || {}
				}).catch((err) => {
					console.error(err)
				})
			}
		}
	}
</script>

<style>
	.listItem {
		margin: 15px;
		padding: 0px 20px;
	}
</style>